<include file="public@myheader" />

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>

    .row{margin: 0px; width: 100%;}
    .mt20{ margin-top:20px;}
    .font{ font-size: 1.5rem;line-height: 3rem;}
</style>
</head>
<body>



<!--    <h2>查询下载数据</h2>-->

    <form>
        <div class="row mt20">

            <div class="col-xs-1 text-center" style="font-size: 1.5rem; line-height: 3.0rem;">选择</div>

            <div class="col-xs-4">
                <select name="app_url" class="layui-input-inline layui-input" id="url" style="width: 100%;">
                    <option value="0">选择一个网站</option>

                    <volist name="url" id='vo'>
                        <option value="{$vo}">{$vo}</option>
                    </volist>

                </select>
            </div>

            <div class="col-xs-4">
                <div class="layui-input-inline" style="width: 100%;">
                    <input autocomplete="off" type="text" name="time" class="layui-input" id="test10"
                          value="" placeholder="yyyy-MM-dd HH:mm- yyyy-MM-dd HH:mm">
                    <!-- <input type="hidden" name="choose_time" value="" id="choose_time"> -->
                </div>
            </div>

            <input class="col-xs-2  btn btn-info" style="line-height: 24px;" type="" id="search" value="查询">

        </div>
    </form>

    

<div class="container" id="app" style="margin-top: 30px; display: block;">
    <div id="titles" class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">基本信息</h3>

        </div>
        <div class="panel-body">

             <table class="layui-table">
              <thead>
                <tr>
                  <th>微信号</th>
                  <th>次数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(value, key) in msg">
                  <th class='col-xs-6'>{{ key }}</th>
                  <th >{{ value }}</th>
                </tr>
              </tbody>
            </table>

            
            
        </div>
        <div class="panel-footer text-right"><div id="btn_download" class="btn btn-info">下载</div></div>
    </div>
</div>

<!--    <div style="width: 98%; margin: 0 auto;"> <table class="layui-hide" id="test" lay-filter="test"></table></div>-->











    <script src="__STATIC__/layui/layui.js"></script>

    <script>

    function ali_ajax(url_time){
        var result ='';
        $.ajax({
            url: 'wx_times',
            type: 'POST',
            datatype: 'json',
            async : false,
            data: url_time,
            success:function(res){
                // console.log(res);
                 result = res.data;
            }
        });
         return result;
     };




    function showtab(res){
        if(res.code=='0'){
            $('.container').css('display','block');

            if(res.data.data.url=='0'){
                res.data.data.url="全部";
            }
            if(res.count=='0'){
                $('#btn_download').css('display','none');
                $('#fcount').css('background','red');
                $('#titles').removeClass('panel-success').addClass('panel-danger');


            }else{
                $('#btn_download').css('display','block');
                $('#fcount').css('background','#fff');
                $('#titles').removeClass('panel-danger').addClass('panel-success');
            }

            $('#furl').text(res.data.data.url);
            $('#ftime').text(res.data.data.chose_time);
            $('#fcount').text(res.count);
            $('#fname').text(res.data.time);
        }
    }

    //下载数据
    function download(res){
        window.location.href="ExportExcel?app_url="+res.app_url+'&time='+res.time;


    }


     $('#search').click(function(event) {
        var arr={};
        arr.app_url = $('#url').val();
        arr.time = $('#test10').val();
        var abc = ali_ajax(arr);
        console.log(abc);

        new Vue({
          el: '#app',
          data: {
            msg:abc
          },
          method:{

          }
        });


     });


        




        layui.use(['laydate','table'],function () {
            var laydate=layui.laydate;
            var table = layui.table;
            //日期时间范围
            laydate.render({
                elem: '#test10'
                ,type: 'datetime'
                ,range: true
                ,min: -28 //7天前
                ,max: 1 //7天后
                ,done:function (value,date,endDate) {
                    $('#choose_time').val(value);
                    // console.log(value); //得到日期生成的值，如：2017-08-18
                    // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            });





        });


    </script>




</body>
</html>